<div class="bk_content_ful">
  <div class="layui-card">
    <div class="layui-tab layui-tab-brief bk_tap" lay-filter="docDemoTabBrief">
      <ul class="layui-tab-title">
        <li class="layui-this">人员信息</li>
        <li>基础信息</li>
        <li>权限分配</li>
        <li>商品管理</li>
        <li>订单管理</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <div class="layui-card-body">
            <form class="layui-form" action="">
              <div class="layui-row bk_search_box">
                <div class="layui-col-xs4">
                  <div class="layui-form-item">
                    <label class="layui-form-label">文件类型</label>
                    <div class="layui-input-block">
                      <select name="city" lay-verify="required">
                        <option value=""></option>
                        <option value="0">北京</option>
                        <option value="1">上海</option>
                        <option value="2">广州</option>
                        <option value="3">深圳</option>
                        <option value="4">杭州</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="layui-col-xs4">
                  <div class="layui-form-item">
                    <label class="layui-form-label">选择区域</label>
                    <div class="layui-input-block">
                      <select name="city" lay-verify="required">
                        <option value=""></option>
                        <option value="0">北京</option>
                        <option value="1">上海</option>
                        <option value="2">广州</option>
                        <option value="3">深圳</option>
                        <option value="4">杭州</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="layui-col-xs4">
                  <div class="layui-form-item">
                    <label class="layui-form-label">关键字</label>
                    <div class="layui-input-block">
                      <input type="text" name="title" required  lay-verify="required" placeholder="请输搜索关键字" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                </div>
                <div class="right_btn">
                  <button type="button" class="layui-btn" data-method="offset" data-type="auto">查询</button>
                  <button type="button" class="layui-btn layui-btn-primary">重置</button>
                </div>
              </div>
            </form>
            <div class="layui-card-header bk_card_header" id="layerDemo_hash"> <a href="javascript:;" class="layui-btn layui-btn-xs"> <i class="layui-icon">&#xe654;</i> <span>新增</span> </a> <div data-method="offset" data-type="auto" class="layui-btn layui-btn-xs"> <i class="layui-icon">&#xe642;</i> <span>编辑</span> </div> <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-primary" id="search_hash"> <i class="layui-icon">&#xe615;</i> </a> </div>
            <div class="layui-card-body bk_card_body">
              <table id="demo_hash" lay-filter="test_hash">
              </table>
              <script type="text/html" id="barDemo_hash">
              <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
              <!-- <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> -->
              <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script> 
            </div>
          </div>
        </div>
        <div class="layui-tab-item">
          <div class=" bk-side-child">
            <div class="layui-card bk_full has_header left_tree">
              <div class="layui-card-header">
                <h1>目录树</h1>
              </div>
              <div class="bk_full">
                <div id="test1" class="demo-tree demo-tree-box"></div>
              </div>
              <!-- 左侧子树 --> 
            </div>
            <div class="yincang_on" id="bk_toggle">&nbsp;</div>
          </div>
          <div class="bk_hastap_right toggle_w" style=" margin-left:270px;">
            <div class="bk-card-body">
              <form class="layui-form" action="">
                <div class="layui-row bk_search_box">
                  <div class="layui-col-xs4">
                    <div class="layui-form-item">
                      <label class="layui-form-label">文件类型</label>
                      <div class="layui-input-block">
                        <select name="city" lay-verify="required">
                          <option value=""></option>
                          <option value="0">北京</option>
                          <option value="1">上海</option>
                          <option value="2">广州</option>
                          <option value="3">深圳</option>
                          <option value="4">杭州</option>
                        </select>
                      </div>
                    </div>
                  </div>
                  <div class="layui-col-xs4">
                    <div class="layui-form-item">
                      <label class="layui-form-label">选择区域</label>
                      <div class="layui-input-block">
                        <select name="city" lay-verify="required">
                          <option value=""></option>
                          <option value="0">北京</option>
                          <option value="1">上海</option>
                          <option value="2">广州</option>
                          <option value="3">深圳</option>
                          <option value="4">杭州</option>
                        </select>
                      </div>
                    </div>
                  </div>
                  <div class="layui-col-xs4">
                    <div class="layui-form-item">
                      <label class="layui-form-label">关键字</label>
                      <div class="layui-input-block">
                        <input type="text" name="title" required  lay-verify="required" placeholder="请输搜索关键字" autocomplete="off" class="layui-input">
                      </div>
                    </div>
                  </div>
                  <div class="right_btn">
                    <button type="button" class="layui-btn">查询</button>
                    <button type="button" class="layui-btn layui-btn-primary">重置</button>
                  </div>
                </div>
              </form>
              <div class="layui-card-header bk_card_header"> <a href="#/member/all/edit" class="layui-btn layui-btn-xs"> <i class="layui-icon">&#xe654;</i> <span>新增</span> </a> <a href="#/member/all/edit" class="layui-btn layui-btn-xs"> <i class="layui-icon">&#xe642;</i> <span>编辑</span> </a> <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-primary" id="search_hash"> <i class="layui-icon">&#xe615;</i> </a> </div>
              <div class="">
                <table id="demo_hash" lay-even="" lay-filter="test_hash">
                </table>
                <script type="text/html" id="barDemo_hash_1">
              <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
              <!-- <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> -->
              <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script> 
              </div>
            </div>
          </div>
        </div>
        <div class="layui-tab-item">内容3</div>
        <div class="layui-tab-item">内容4</div>
        <div class="layui-tab-item">内容5</div>
      </div>
    </div>
  </div>
</div>
<div style=" display:none">
<div class="form_bj">
<table class="layui-table" lay-even="" lay-skin="row">

                        <tr>
                            <td class="formDetail-tdTitle">姓名：</td>
                            <td class="formDetail-tdInput">
                                <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
                            </td>
                            <td class="formDetail-tdTitle">基本工资：</td>
                            <td class="formDetail-tdInput">
                                <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
                            </td>
                            <td class="formDetail-tdTitle">岗位薪资：</td>
                            <td class="formDetail-tdInput">
                                <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
                            </td>
                        </tr>
                        <tr>
                            <td class="formDetail-tdTitle">绩效工资：</td>
                            <td class="formDetail-tdInput">
                                <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
                            </td>
                            <td class="formDetail-tdTitle">补贴：</td>
                            <td class="formDetail-tdInput">
                                <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
                            </td>
                            <td class="formDetail-tdTitle">应发合计：</td>
                            <td class="formDetail-tdInput">
                                <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
                            </td>
                        </tr>
                        <tr>
                            <td class="formDetail-tdTitle">事假扣除：</td>
                            <td class="formDetail-tdInput">
                                <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
                            </td>
                            <td class="formDetail-tdTitle">住房公积金：</td>
                            <td class="formDetail-tdInput">
                                <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
                            </td>
                            <td class="formDetail-tdTitle">养老保险：</td>
                            <td class="formDetail-tdInput">
                                <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
                            </td>
                        </tr>
                        <tr>
                            <td class="formDetail-tdTitle">失业保险：</td>
                            <td class="formDetail-tdInput">
                                <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
                            </td>
                            <td class="formDetail-tdTitle">工伤保险：</td>
                            <td class="formDetail-tdInput">
                                <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
                            </td>
                            <td class="formDetail-tdTitle">生育保险：</td>
                            <td class="formDetail-tdInput">
                                <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
                            </td>
                        </tr>
                        <tr>
                            <td class="formDetail-tdTitle">医疗保险：</td>
                            <td class="formDetail-tdInput">
                                <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
                            </td>
                            <td class="formDetail-tdTitle">应发合计：</td>
                            <td class="formDetail-tdInput">
                                <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
                            </td>
                            <td class="formDetail-tdTitle"></td>
                            <td class="formDetail-tdInput">

                            </td>
                        </tr>
                    </table>
</div>
</div>
<!--弹框编辑内容-->
<script type="text/html" id="search_tpl_hash">
  <form class="layui-form" action="">
    <div class="layui-form-item">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-block">
        <input type="text" name="title" placeholder="请输入用户名.." autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">城市</label>
      <div class="layui-input-block">
        <select name="city">
          <option value=""></option>
          <option value="0">北京</option>
          <option value="1">上海</option>
          <option value="2">广州</option>
          <option value="3">深圳</option>
          <option value="4">杭州</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">是否禁用</label>
      <div class="layui-input-block">
        <input type="checkbox" name="switch" lay-skin="switch">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">性别</label>
      <div class="layui-input-block">
        <input type="radio" name="sex" value="男" title="男">
        <input type="radio" name="sex" value="女" title="女" checked>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo_hash"><i class="layui-icon">&#xe615;</i> 搜索</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</script> 
<script>
  layui.config({
    base: '/src/js/'
  }).use(['jquery', 'mockjs', 'table', 'sidebar', 'form'], function () {
    var $ = layui.jquery,
      layer = layui.layer,
      table = layui.table,
      sidebar = layui.sidebar,
      form = layui.form;
    // 注入mock
    layui.mockjs.inject({
      'POST /demo/table/user': {
        code: 0,
        msg: "xxx",
        count: 1000,
        'data|20': [{
          'id|+1': 1,
          username: '@name',
          sex: '@boolean',
          city: '@city',
          sign: '@csentence',
          experience: '@integer',
          score: '@integer',
          classify: '@word',
          wealth: '@integer',
          auth: '@boolean'
        }]
      }
    });
    //第一个实例
    table.render({
      method: 'post',
      // size: 'sm',
      limit: 20,
      elem: '#demo_hash',      
      toolbar: false,//true
      height: 'full-240',//表格区域的高度值
      url: '/demo/table/user', //数据接口
      page: true, //开启分页
      cols: [
        [ //表头
          {
            field: 'id',
            title: 'ID',
            width: 80,
            sort: true,
            fixed: 'left'
          }, {
            field: 'username',
            title: '用户名',
            width: 80
          }, {
            field: 'sex',
            title: '性别',
            width: 80,
            sort: true
          }, {
            field: 'city',
            title: '城市',
            width: 80
          }, {
            field: 'sign',
            title: '签名',
            width: 177
          }, {
            field: 'experience',
            title: '积分',
            width: 80,
            sort: true
          }, {
            field: 'score',
            title: '评分',
            width: 80,
            sort: true
          }, {
            field: 'classify',
            title: '职业',
            width: 80
          }, {
            field: 'wealth',
            title: '财富',
            width: 135,
            sort: true
          }, {
            fixed: 'right',
            width: 180,
            align: 'center',
            toolbar: '#barDemo_hash'
          }
        ]
      ]
    });
	table.render({
      method: 'post',
      // size: 'sm',
      limit: 20,
      elem: '#barDemo_hash_1',      
      toolbar: false,//true
      height: 'full-240',//表格区域的高度值
      url: '/demo/table/user', //数据接口
      page: true, //开启分页
      cols: [
        [ //表头
          {
            field: 'id',
            title: 'ID',
            width: 80,
            sort: true,
            fixed: 'left'
          }, {
            field: 'username',
            title: '用户名',
            width: 80
          }, {
            field: 'sex',
            title: '性别',
            width: 80,
            sort: true
          }, {
            field: 'city',
            title: '城市',
            width: 80
          }, {
            field: 'sign',
            title: '签名',
            width: 177
          }, {
            field: 'experience',
            title: '积分',
            width: 80,
            sort: true
          }, {
            field: 'score',
            title: '评分',
            width: 80,
            sort: true
          }, {
            field: 'classify',
            title: '职业',
            width: 80
          }, {
            field: 'wealth',
            title: '财富',
            width: 135,
            sort: true
          }, {
            fixed: 'right',
            width: 180,
            align: 'center',
            toolbar: '#barDemo_hash'
          }
        ]
      ]
    });
    //监听事件
    //监听工具条
    table.on('tool(test_hash)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的DOM对象
      console.log(obj);
    
      if(layEvent === 'detail'){ //查看
        layer.msg(JSON.stringify(obj.data));
        //do somehing
      } else if(layEvent === 'del'){ //删除
        layer.confirm('真的删除行么', function(index){
          obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
          layer.close(index);
          //向服务端发送删除指令
        });
      } else if(layEvent === 'edit'){ //编辑
        //do something
        
        //同步更新缓存对应的值
        obj.update({
          username: '123'
          ,title: 'xxx'
        });
      }
    });

    $('#search_hash').on('click', function () {
      var that = this;
      // console.log($('#search_tpl_hash').html());
      sidebar.render({
        elem: that,
        content: $('#search_tpl_hash').html(),
        title: '搜索',
        shade: true,
        // shadeClose:false,
        // direction: 'left'
        // dynamicRender: false,
        // url: 'views/member/all/search.html',
        width: '500px', //可以设置百分比和px
        done: function () {
          console.log('ccc');
          form.render();

          //监听提交
          form.on('submit(formDemo_hash)', function (data) {
            // layer.msg(JSON.stringify(data.field));
            table.reload('demo_hash', {
              where: data.field
            });
            return false;
          });
        }
      });
    });
  });
</script>
<script>
layui.use(['tree', 'util'], function(){
  var tree = layui.tree
  ,layer = layui.layer
  ,util = layui.util
  
  //模拟数据
  ,data = [{
    title: '一级1'
    ,id: 1
    ,field: 'name1'
    ,checked: true
    ,spread: true
    ,children: [{
      title: '二级1-1 可允许跳转'
      ,id: 3
      ,field: 'name11'
      ,href: 'https://www.layui.com/'
      ,children: [{
        title: '三级1-1-3'
        ,id: 23
        ,field: ''
        ,children: [{
          title: '四级1-1-3-1'
          ,id: 24
          ,field: ''
          ,children: [{
            title: '五级1-1-3-1-1'
            ,id: 30
            ,field: ''
          },{
            title: '五级1-1-3-1-2'
            ,id: 31
            ,field: ''
          }]
        }]
      },{
        title: '三级1-1-1'
        ,id: 7
        ,field: ''
        ,children: [{
          title: '四级1-1-1-1 可允许跳转'
          ,id: 15
          ,field: ''
          ,href: 'https://www.layui.com/doc/'
        }]
      },{
        title: '三级1-1-2'
        ,id: 8
        ,field: ''
        ,children: [{
          title: '四级1-1-2-1'
          ,id: 32
          ,field: ''
        }]
      }]
    },{
      title: '二级1-2'
      ,id: 4
      ,spread: true
      ,children: [{
        title: '三级1-2-1'
        ,id: 9
        ,field: ''
        ,disabled: true
      },{
        title: '三级1-2-2'
        ,id: 10
        ,field: ''
      }]
    },{
      title: '二级1-3'
      ,id: 20
      ,field: ''
      ,children: [{
        title: '三级1-3-1'
        ,id: 21
        ,field: ''
      },{
        title: '三级1-3-2'
        ,id: 22
        ,field: ''
      }]
    }]
  },{
    title: '一级2'
    ,id: 2
    ,field: ''
    ,spread: true
    ,children: [{
      title: '二级2-1'
      ,id: 5
      ,field: ''
      ,spread: true
      ,children: [{
        title: '三级2-1-1'
        ,id: 11
        ,field: ''
      },{
        title: '三级2-1-2'
        ,id: 12
        ,field: ''
      }]
    },{
      title: '二级2-2'
      ,id: 6
      ,field: ''
      ,children: [{
        title: '三级2-2-1'
        ,id: 13
        ,field: ''
      },{
        title: '三级2-2-2'
        ,id: 14
        ,field: ''
        ,disabled: true
      }]
    }]
  },{
    title: '一级3'
    ,id: 16
    ,field: ''
    ,children: [{
      title: '二级3-1'
      ,id: 17
      ,field: ''
      ,fixed: true
      ,children: [{
        title: '三级3-1-1'
        ,id: 18
        ,field: ''
      },{
        title: '三级3-1-2'
        ,id: 19
        ,field: ''
      }]
    },{
      title: '二级3-2'
      ,id: 27
      ,field: ''
      ,children: [{
        title: '三级3-2-1'
        ,id: 28
        ,field: ''
      },{
        title: '三级3-2-2'
        ,id: 29
        ,field: ''
      }]
    }]
  }]
  
  //模拟数据1
  ,data1 = [{
    title: '江西'
    ,id: 1
    ,children: [{
      title: '南昌'
      ,id: 1000
      ,children: [{
        title: '青山湖区'
        ,id: 10001
      },{
        title: '高新区'
        ,id: 10002
      }]
    },{
      title: '九江'
      ,id: 1001
    },{
      title: '赣州'
      ,id: 1002
    }]
  },{
    title: '广西'
    ,id: 2
    ,children: [{
      title: '南宁'
      ,id: 2000
    },{
      title: '桂林'
      ,id: 2001
    }]
  },{
    title: '陕西'
    ,id: 3
    ,children: [{
      title: '西安'
      ,id: 3000
    },{
      title: '延安'
      ,id: 3001
    }]
  }]
  

 
  //基本演示
  tree.render({
    elem: '#test12'
    ,data: data
    ,showCheckbox: true  //是否显示复选框
    ,id: 'demoId1'
    ,isJump: true //是否允许点击节点时弹出新窗口跳转
    ,click: function(obj){
      var data = obj.data;  //获取当前点击的节点数据
      layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
    }
  });
  
  //按钮事件
  util.event('lay-demo', {
    getChecked: function(othis){
      var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
      
      layer.alert(JSON.stringify(checkedData), {shade:0});
      console.log(checkedData);
    }
    ,setChecked: function(){
      tree.setChecked('demoId1', [12, 16]); //勾选指定节点
    }
    ,reload: function(){
      //重载实例
      tree.reload('demoId1', {
        
      });
      
    }
  });
 
  //常规用法
  tree.render({
    elem: '#test1' //默认是点击节点可进行收缩
    ,data: data1
  });


	 
});
</script>
<script>
layui.use('layer', function(){
  var layer = layui.layer;
  
//  layer.msg('hello');
  
 // layer.open({
//  type: 1,
//  content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
//});
var active = {
//      setTop: function() {
//        var that = this;
//        //多窗口模式，层叠置顶
//        layer.open({
//          type: 2 //此处以iframe举例
//            ,
//          title: '当你选择该窗体时，即会在最顶端',
//          area: ['390px', '260px'],
//          shade: 0,
//          maxmin: true,
//          offset: [ //为了演示，随机坐标
//            Math.random() * ($(window).height() - 300), Math.random() * ($(window).width() - 390)
//          ],
//          content: 'http://layer.layui.com/test/settop.html',
//          btn: ['继续弹出', '全部关闭'] //只是为了演示
//            ,
//          yes: function() {
//            $(that).click();
//          },
//          btn2: function() {
//            layer.closeAll();
//          }
//
//          ,
//          zIndex: layer.zIndex //重点1
//            ,
//          success: function(layero) {
//            layer.setTop(layero); //重点2
//          }
//        });
//      },
	  
      offset: function(othis) {
        var type = othis.data('type'),
          text = othis.text();

        layer.open({
          type: 2,
		  area: ['880px', '360px'],
          maxmin: true,
          offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
            ,
          id: 'layerDemo_hash' + type //防止重复弹出
            ,
		title :'人员信息编辑',
         content: 'views/bkui/form_bg.html',
//       content: $('#form_bj'),
          btn: ['提交', '重置'],
          btnAlign: 'c' //按钮居中
            ,
          shade: [0.3, '#393D49'] //不显示遮罩
            ,
          yes: function() {
            layer.closeAll();
          }
        });
      }
    };

    $('#layerDemo_hash .layui-btn').on('click', function() {
      var othis = $(this),
        method = othis.data('method');
      active[method] ? active[method].call(this, othis) : '';
    });
});   </script>

<script>
(function() {
    "use strict";
    //左侧树收缩
var left_pd = $(".bk-side-child").width();
$("#bk_toggle").click(function(){
	if($(this).hasClass("yincang_on")){
	$(".bk-side-child").animate({width:'7px'},500); 
	 $(".left_tree").fadeOut();
	 $(".toggle_w").animate({marginLeft:'0px'});
//	 $(".xmjg_home_xxk").animate({left:'-=332px'});
	  $(this).removeClass("yincang_on");
	  $(this).addClass("yincang_off");
	  $(this).animate({right:'7px'},500);
	}else{
	$(".bk-side-child").animate({width:left_pd},500); 
	$(".toggle_w").animate({marginLeft:left_pd});
	$(".left_tree").fadeIn();
//	$(".xmjg_home_xxk").animate({left:'+=332px'});
	$(this).removeClass("yincang_off");
	$(this).addClass("yincang_on");
	 $(this).animate({right:'1px'},500);
	}
});
	})(jQuery);
</script>
<style scoped>

</style>
